<template>
  <div class="panel">
    <header-tab>
      <span slot="left" @click="Go_order"><van-icon name="arrow-left" /></span>
      <span slot="title">订单详情</span>
    </header-tab>

    <!-- 宠物寄养 -->
    <div>
      <div class="go_door">
        <div class="go_top">宠物寄养</div>
        <van-cell-group>
          <van-cell title="服务日期" :value="this.$route.query.po_time" />
          <van-cell title="订单总价" :value="'￥' + this.$route.query.po_price" />
          <van-cell title="联系人" :value="this.$route.query.po_linkman" />
          <van-cell title="手机号" :value="this.$route.query.po_userPhone" />
        </van-cell-group>
      </div>

      <!-- 服务宠物 -->
      <div class="fw_pets">
        <div class="fw_top">服务宠物</div>
        <div class="fw_two" v-for="(item, p_id) in petData" :key="p_id">
          <van-image round width="4em" height="4rem" :src="item.p_img" />
          <p class="fw_name">{{ item.p_name }}</p>
        </div>
      </div>
      <!-- 切换状态按钮  -->
      <div class="change_btn">
        <div>
          <van-button plain color="#202023" round size="small" @click="changeDone">完成</van-button>
        </div>
        <div><van-button plain color="#202023" round size="small" @click="changeCancel">取消</van-button></div>
        <div><van-button plain color="#202023" round size="small" @click="changeDelete">删除</van-button></div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
import { Dialog } from 'vant';
import HeaderTab from '../components/HeaderTab.vue';
export default {
  components: { HeaderTab },
  props: ['po_id', 'pet_id', 'po_time', 'po_price', 'po_linkman', 'po_userPhone', 'po_petName'],
  data() {
    return {
      petData: [],
    };
  },
  methods: {
    changeDone() {
      // console.log('完成订单');
      const url = 'order/changeDone';
      let po_id = this.$route.query.po_id;
      let params = `po_id=${po_id}`;
      this.axios.put(url, params).then(res => {
        console.log(res);
        if (res.data.code == 200) {
          Toast.success('订单状态更改为`已完成`');

          setTimeout(() => {
            this.$router.push('/order');
          }, 2000);
        }
      });
    },
    changeCancel() {
      const url = 'order/changeCancel';
      let po_id = this.$route.query.po_id;
      let params = `po_id=${po_id}`;
      this.axios.put(url, params).then(res => {
        console.log(res);
        if (res.data.code == 200) {
          Toast.success('订单状态更改为`已取消`');
          setTimeout(() => {
            this.$router.push('/order');
          }, 2000);
        }
      });
    },
    changeDelete() {
      Dialog.confirm({
        title: '请确认',
        message: '确认删除订单吗?',
      })
        .then(() => {
          // on confirm
          const url = 'order/delete';
          let po_id = this.$route.query.po_id;
          let params = `po_id=${po_id}`;
          this.axios.post(url, params).then(res => {
            console.log(res);
            if (res.data.code == 200) {
              Toast.success('订单删除成功');
              setTimeout(() => {
                this.$router.push('/order');
              }, 2000);
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },

    Go_order() {
      this.$router.push('/order');
    },
    getPetData() {
      const url = 'pet/selectPet/pet';
      let pet_id = this.$route.query.pet_id;
      let params = `pet_id=${pet_id}`;
      this.axios.post(url, params).then(res => {
        console.log(res);
        this.petData = res.data.data;
      });
    },
  },
  mounted() {
    console.log(this.$route.query.pet_id);
    this.getPetData();
  },
};
</script>

<style lang="scss" scoped>
.panel {
  height: 100%;
  padding: 1rem;
}
.go_door {
  box-shadow: 0 0.4rem 0.8rem 0 rgba(0, 0, 0, 0.2), 0 0.6rem 2rem 0 rgba(0, 0, 0, 0.19);
  margin: auto;
  border-radius: 1rem;
  width: 96%;
  // background-color: #ffffff;
  .go_top {
    height: 4rem;
    width: 90%;
    line-height: 5rem;
    font-size: 1.6rem;
    font-weight: bold;
    padding: 0 1.6rem;
  }
}

.fw_pets {
  box-shadow: 0 0.4rem 0.8rem 0 rgba(0, 0, 0, 0.2), 0 0.6rem 2rem 0 rgba(0, 0, 0, 0.19);
  margin: 0 auto;
  border-radius: 1rem;
  width: 96%;
  // background-color: #ffffff;
  margin-top: 2rem;
}

.fw_top {
  height: 4rem;
  width: 90%;
  line-height: 5rem;
  font-size: 1.6rem;
  font-weight: bold;
  padding: 0 1.6rem;
}
.fw_two {
  margin-left: 1.6rem;
  display: flex;
  align-items: center;
  padding: 1rem 0;
}
.fw_name {
  margin-left: 2rem;
}
.change_btn {
  display: flex;
  justify-content: flex-end;
  margin: 2rem;
  padding-bottom: 2rem;
  div {
    margin: 0 0.5rem;
  }
}
</style>
